<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p1_CSS的三种位置</title>
    <!-- 3.引入外部的CSS样式 -->
    <link rel="stylesheet" href="01.css">
    <!-- 2.CSS内部样式，对当前页面所有被选择器选中的元素生效-->
    <style>
        /*1.标签名选择器*/
        p{
            color: blue;
        }
        div{
            color: green;
        }
        /* 3.类选择器：选中指定class值的一类元素 */
        .msg{
            color: white;
        }
        .error{
            background-color: red;
        }
        .success{
            background-color: green;
        }
        /* 4.并列选择器：紧挨在一起的写法，必须同时满足两个选择器条件才可生效，是“与”的关系*/
        #d1:hover{
            background-color: red;
        }
        /* 5.伪类选择器 必须按照下面顺序写！*/
        a:link{
            color:gray;
        }
        a:visited{
            color: green;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: blue;
        }
        /* 6.属性选择器：选中包含指定属性、属性值的元素*/
        input[name="uname"]{
            background-color: yellow;
        }
        /* 7.通用选择器*/
        *{
            font-style: italic;
        }
        /* 8.群组选择器：可以写多个不同的选择器，使用逗号隔开，只要满足其中一种就生效，是“或”的关系*/
        h4,#d1,.error{
            /* 边框：粗细 线型 颜色 soild单实线 */
            border: 5px solid red;
        }
        /* 9.后代选择器（空格） 选中包含在内的所有后代元素 */
        #d2 span {
            background-color: lightskyblue;
        }
        /* 10.直接子代选择器（大于号） 只选中子元素，但可逐级向下写多层*/
        #d2>div>p>span{
            color: orange;
        }
    </style>
</head>
<body>
    <!--1.行内样式 加在当前行元素之上，只对当前元素生效 -->
    <h4 style="color: red; background-color: yellow;">我是标题</h4>
    <h4>我是标题</h4>
    <h4>我是标题</h4>

    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <hr>
    <span class="error msg">用户不能为空!</span>
    <span class="error msg">密码不能为空</span>
    <span class="success msg">手机号格式正确！</span>
    <span class="success msg">邮箱格式正确！</span>
    <hr>
    <a href="https://www.baidu.com">超链接1</a>
    <a href="abc">超链接2</a>
    <hr>
    <input type="text" name="uname">
    <input type="text" name="nickname">
    <select name="uname">
        <option value="1"></option>
        <option value="2"></option>
    </select>
    <hr>
    <div id="d2">
        <span>111</span>
        <div>
            <span>222</span>
            <p>测试文字</p>
            <p>我是<span>333</span>段落</p>
        </div>
        <span>444</span>
    </div>
</body>
</html>